<template>
	<div class="wrap">
		<!-- 个人中心头部 -->
		<div class="img-bg">
			<img src="@/assets/img/bg2.png" alt="" />
			<div class="demo-basic--circle">
				<img id="avatar" :src="imageUrl" class="avatar" />
			</div>
		</div>

		<div class="show-info">
			<!-- 个人基本信息展示区域 -->
			<div class="info">
				<ul class="list">
					<li>
						<div class="stuname">{{ master.manName }}</div>
					</li>
					<li>
						<div>职工号：{{ master.manId }}</div>
						<div>电话：{{ master.phone }}</div>
						<div>性别：{{ master.sex === 1 ? '男' : master.sex === 2 ? '女' : '保密' }}</div>
					</li>
					<li>
						<div>邮箱：{{ master.email }}</div>
						<div>创建时间：{{ new Date(master.createTime).toDateString() }}</div>
						<div>最近一次访问时间：{{ new Date(master.updateTime).toDateString() }}</div>
					</li>
				</ul>
				<el-button type="primary" @click="isShow = !isShow">修改个人信息</el-button>
			</div>

			<!-- 修改信息对话框 -->
			<el-dialog width="500" v-model="isShow">
				<template #header>
					<h2 class="title">修改个人信息</h2>
				</template>
				<el-form label-position="top">
					<el-form-item label="姓名">
						<el-input v-model.trim="modMasterInfo.manName" />
					</el-form-item>
					<el-form-item label="职工号">
						<el-input v-model.number="modMasterInfo.manId" readonly />
					</el-form-item>
					<el-form-item label="性别">
						<el-radio-group v-model="modMasterInfo.sex">
							<el-radio :value="1">男</el-radio>
							<el-radio :value="2">女</el-radio>
							<el-radio :value="3">保密</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="电话号码">
						<el-input v-model.trim="modMasterInfo.phone" />
					</el-form-item>
					<el-form-item label="邮箱">
						<el-input v-model.trim="modMasterInfo.email" />
					</el-form-item>
					<el-form-item label="修改密码">
						<el-input v-model.trim="modMasterInfo.password" type="password" />
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="submitModInfo">确认修改</el-button>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script setup>
import { nextTick, reactive, ref ,getCurrentInstance} from 'vue'
import { useUserStore } from '@/stores/userStore'
import { changeManInfo } from '@/utils/axios/master'
import { getUserInfo } from '@/utils/axios/stuReqest'
import useRegStore from '@/stores/useReg'

const { phoneIsOk, handleCheckEmail } = useRegStore()

const userStore = useUserStore()
const { proxy } = getCurrentInstance()
const isShow = ref(false)
const master = userStore.userInfo
const imageUrl = userStore.imageUrl
const modMasterInfo = reactive({
	manName: master.manName,
	manId: master.manId,
	email: master.email ?? "",
	password: '',
	phone: master.phone,
	sex: master.sex,
})


const checkModMasterInfo = () => {
	if (modMasterInfo.manName?.length > 20) {
		ElMessage.warning({ message: '名字过长', duration: 1000 })
		return false
	}

	if (modMasterInfo?.password?.length > 20) {
		ElMessage.warning({ message: '密码过长', duration: 1000 })
		return false
	}
	if (!phoneIsOk(modMasterInfo.phone)) {
		ElMessage.warning({ message: '手机号不符合', duration: 1000 })
		return false
	}
	if (!handleCheckEmail(modMasterInfo.email)) {
		ElMessage.warning({ message: '邮箱格式不规范', duration: 1000 })
		return false
	}
	
	return true
}


const submitModInfo = async () => {

	if(!modMasterInfo.password) delete modMasterInfo.password
	if(!checkModMasterInfo()) return
	if (modMasterInfo.password) {
		modMasterInfo.password = await proxy.$md5(modMasterInfo.password)
	}
	await changeManInfo(modMasterInfo)
	let { data } = await getUserInfo('/man/getManInfo')
	userStore.userInfo = data
	await nextTick()
	isShow.value = false
}
</script>

<style scoped lang="scss">
.title {
	font-size: 20px;
	margin-bottom: 5px;
}
.el-form {
	width: 300px;
	margin: auto;
}
.wrap {
	padding: 0;
}
.img-bg {
	position: relative;
	border-radius: 10px;
	img {
		width: 100%;
		border-radius: 10px 10px 0 0;
	}
}

//头像设置
.demo-basic--circle {
	position: absolute;
	bottom: -40px;
	left: 60px;
	// width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 5px solid #ffff;
	background-color: #fff;
}

//个人信息展示
.stuname {
	font-weight: 600;
	font-size: 20px;
}

.show-info {
	margin: 50px 0;
	padding: 20px;
}

.list {
	width: 100%;
	li {
		padding: 5px;
		// width: 60%
		display: flex;
		justify-content: space-between;
		div {
			min-width: 250px;
			padding: 5px;
			cursor: pointer;
			&:hover {
				border-radius: 10px;
				box-shadow: 0 0 2px #ccc;
			}
		}
	}
}
</style>
